[程式碼&DEMO] [HackMD完整筆記]

目標

隨著滑鼠的移動去展開選單效果。

步驟流程

**STEP1 **

  const nav = document.querySelector('.top');
  const triggers = document.querySelectorAll('.cool > li');
  const background = document.querySelector('dropdownBackground');

  function handleEnter(){
    console.log('Enter!');
  }

  function handleLeave(){
    console.log('Leave!');
  }

  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));

**STEP2 **

function handleEnter(){
    // console.log('Enter!');
    this.classList.add('trigger-enter');
    setTimeout(()=>this.classList.add('trigger-enter-active'), 150);
    background.classList.add('open');
  }

  function handleLeave(){
    // console.log('Leave!');
    this.classList.remove('trigger-enter', 'trigger-enter-active');
    background.classList.remove('open');
  }

**STEP3 **

function handleEnter(){
    // console.log('Enter!');
    this.classList.add('trigger-enter');
    setTimeout(()=>this.classList.add('trigger-enter-active'), 150);
    background.classList.add('open');

    const dropdown = this.querySelector('.dropdown');
    const dropdownCoords = dropdown.getBoundingClientRect();

    const coords = {
      height : dropdownCoords.height,
      width : dropdownCoords.width,
      top : dropdownCoords.top,
      left : dropdownCoords.left,
    }

    background.style.setProperty('width', `${coords.width}px`);
    background.style.setProperty('height', `${coords.height}px`);
    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
  }